<template>
    <div class="occupation-card">
        <img class="item-header-bg" src="../../../assets/img/long-insure-dispatch/bg-2.png" alt="">
        <div class="title-box flex flex-ai-c">
            <img src="../../../assets/img/long-insure-dispatch/icon-title.png" alt="" class="icon-title-head">
            <div class="fs-14 fc-white">可用工种</div>
        </div>
        <div v-if="showVideo" class="view">
            <div class="fc-green fs-14 pointer" @click="onShowVideo">查看视频</div>
        </div>

        <div class="item-content">
            <div v-for="(i, index) in listData" :key="index" class="item flex flex-jc-sb"
                :class="{ 'set-margin': index === 0 }">
                <div class="left flex flex-ai-c">
                    <div class="order">{{ index + 1 }}</div>
                    <div class="fs-14 mg-r-5">{{ i.level }}类</div>
                    <div class="fs-12 fc-grey">{{ i.name }}</div>
                </div>
            </div>
        </div>
    </div>
    <FullVideo v-model:show="videoVisible" :video-list="videoList" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import FullVideo from '@/components/VideoComponent/FullVideo.vue'

const props = defineProps({
    listData: {
        type: Array,
        default() {
            return []
        }
    },
    showVideo: {
        type: Boolean,
        default: false
    },
    videoList: {
        type: Array,
        default() {
            return []
        }
    }
})

const videoVisible = ref(false)

const onShowVideo = () => {
    videoVisible.value = true
}

</script>
<style lang="stylus" scoped>
.occupation-card {
    .item-header-bg {
        width: 100%;
        display: block;
    }

    .icon-title-head {
        width: 18px;
        height: 18px;
    }

    .title-box {
        position: absolute;
        left: 36px;
        top: 8px;
    }

    .view {
        position: absolute;
        right: 36px;
        top: 10px;
    }

    .item-content {
        background: rgba(224, 240, 247, 0.7);
        padding: 12px 12px 0 12px;
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-top: none;
        border-radius: 0 0 8px 8px;
    }

    .set-margin {
        margin-top: -30px;
    }

    .item {
        margin-bottom: 20px;
    }

    .order {
        padding: 2px 4px;
        background: #1989FA;
        border-radius: 4px;
        color: #fff;
        position: relative;
        margin-right: 10px;

        &::after {
            content: "";
            position: absolute;
            right: -20px;
            top: 50%;
            transform: translateY(-50%);
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid #1989FA;
            border-right: 15px solid transparent;
        }
    }
    .fc-red {
        color: #FF7E68;
    }
    .fc-green {
        color: #00D679;
    }
}
</style>
